<template>
  <div class="Commoditylist-content">
    <p style="height: 40px; border-bottom: 1px solid #ccc">商品列表</p>
    <el-table :data="tabledata">
      <el-table-column prop="name" type="expand">
        <template slot-scope="items">
          <div style="display: flex; justify-content: space-around">
            <div>
              <p>商品ID:{{ items.row.id }}</p>
              <p>所属分类:{{ items.row.category }}</p>
              <div style="display:flex;"><p style="line-height:80px;margin-right:20px;">商品图片:</p><p><img :src="items.row.imgUrl" /></p></div>
              <p>商品评价:{{ items.row.rating }}</p>
              <p>商品描述:{{ items.row.goodsDesc }}</p>
            </div>
            <div>
              <p>商品名称{{ items.row.name }}</p>
              <p>商品价格{{ items.row.price }}</p>
              <p>创建时间{{ items.row.ctime }}</p>
              <p>商品销量{{ items.row.sellCount }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="category" label="所属分类"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="imgUrl" label="商品图片">
        <template slot-scope="item">
          <img :src="item.row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="goodsDesc" label="商品描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="item">
          <el-button type="primary" @click="editclick(item.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="deletclick(item.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="Commoditylist-page">
      <!-- @size-change:每页多少条数，
      @current-change:点击第几页数变化时
      :current-page:当前默认显示的页数
      :page-sizes:可以切换每页显示多少条的数组
      :page-size:当前默认显示的条数
      total:数据库的总条数
      layout:控制分页在每个页面的显示顺序，可以删除，可以换位置
       -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="curpage"
        :page-sizes="curpagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 编辑商品 -->
    <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
      <p>
        商品名字
        <el-input
          v-model="name"
          autocomplete="off"
          style="width: 420px; height: 40px"
        ></el-input>
      </p>
      <p>
        商品分类
        <el-select v-model="value" clearable placeholder="请选择" size="mini">
          <el-option v-for="(e, i) in types[0]" :key="i" :value="e.cateName">
          </el-option>
        </el-select>
      </p>
      <p>
        商品价格
        <el-input
          v-model="price"
          autocomplete="off"
          style="width: 420px; height: 40px"
        ></el-input>
      </p>
      <p style="display:flex;line-height:80px;margin-top:20px;">
        <span style="margin-right:18px">商品图片</span>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
      <p>
        商品描述
        <el-input
          v-model="goodsDesc"
          autocomplete="off"
          style="width: 420px; height: 40px"
        ></el-input>
      </p>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="keepclick" :plain="true"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { itemlist, deletfood, categories, editgoods } from "@/apis/items";
export default {
  data() {
    return {
      total: 0, //总条数
      curpagesizes: [5, 15, 25, 40],
      curpage: 1, //当前默认页数
      pagesize: 5, //当前默认显示多少条
      tabledata: [], //列表数据
      types: [], //所有分类
      // 编辑框数据
      dialogFormVisible: false, //整个框
      name: "",
      price: "",
      value: "",
      imgUrl: "",
      imageUrl:'',
      goodsDesc: "",
    };
  },
  methods: {
    // 编辑栏图片上传成功时
    handleAvatarSuccess(res,file){
        this.imageUrl = URL.createObjectURL(file.raw);
        this.imgUrl=res.imgUrl//新图片的名字
    },
        // 封装的获取列表数据接口功能
    commoditlist() {
      itemlist({ currentPage: this.curpage, pageSize: this.pagesize }).then(
        (res) => {
          if (res.status == 200) {
            this.tabledata = res.data.data;
            this.total = res.data.total;
          }
        }
      );
    },
    // 点击删除商品
    deletclick(ids) {
      deletfood({ id: ids }).then((res) => {
        if (res.data.code == 0) {
          this.commoditlist();
        }
      });
    },
    // 点击编辑时
    editclick(item) {
      this.dialogFormVisible = true;
      this.name = item.name;
      this.price = item.price;
      this.imgUrl = item.imgUrl;
      this.goodsDesc = item.goodsDesc;
      this.ids = item.id;
      this.value = item.category;
      this.imageUrl=this.imgUrl
       this.imgUrl=item.imgUrl.substring(item.imgUrl.lastIndexOf('/')+1)
    },
    // 完成修改编辑
    keepclick() {
      this.dialogFormVisible = false;
      editgoods({
        name: this.name,
        category: this.value,
        price: this.price,
        imgUrl: this.imgUrl,
        goodsDesc: this.goodsDesc,
        id: this.ids,
      }).then((res) => {
       this.$message({
          message:res.data.msg,
          type: 'success'
        });
        this.commoditlist();
      });
    },
    //当每页多少条发生变化
    sizechange(newsize) {
      this.pagesize = newsize;
      this.commoditlist();
    },
    pagechange(newchange) {
      //跳转到第几页发生变化时
      this.curpage = newchange;
      this.commoditlist();
    },
  },
  created() {
    this.commoditlist();
    categories().then((res) => {
      //获取查看所有分类
      this.types.push(res.data.categories);
    });
  },
};
</script>

<style lang="less" scoped>
.Commoditylist-content {
  width: 100%;
  height: 100%;
}
img {
  width: 100px;
  height: 80px;
}
.el-select,
.el-input {
  margin: 10px;
}
p{
  margin:5px 0;
}
</style>